<!-- 危化品车进出记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header" style="height: 0vh;">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
       <div class="dy-panel-content">
        <contentTitle :title="'用水用电'"></contentTitle>
        <div class="yy-box">
          <div class="yy-box-md6">
            <div class="yy-box-icon">
              <img src="../../../assets/img/toilet/shuidian.png" alt="" />
            </div>
            <div class="yy-box-content">
              <!-- 上日 水 -->
              <div class="yy-box-p">
                <div class="yy-box-p1 ">近7日</div>
                <div class="yy-box-p2 green">水</div>
                <div class="yy-box-p3 green">{{ wtvalue }}吨</div>
              </div>

              <!-- 每厕位 水 -->
              <div class="yy-box-p"  style="justify-content: right;">
                <div class="yy-box-p1" >每厕位</div>
                <div class="yy-box-p2 green">水</div>
                <div class="yy-box-p3 green">{{ cwwtValue }}吨</div>
              </div>

              <!-- 上日 电 -->
              <div class="yy-box-p">
                <div class="yy-box-p1 ls">用量</div>
                <div class="yy-box-p2 red">电</div>
                <div class="yy-box-p3 red">{{ elctvalue }}度</div>
              </div>

              <!-- 每厕位 电 -->
              <div class="yy-box-p" style="justify-content: right;">
                <div class="yy-box-p1 ls">用量</div>
                <div class="yy-box-p2 red">电</div>
                <div class="yy-box-p3 red">{{ cwelctValue }}度</div>
              </div>

              <div class="yy-box-br"></div>

              <!-- 人均 水 -->
              <div class="yy-box-p">
                <div class="yy-box-p1 ls">人均</div>
                <div class="yy-box-p2 green">水</div>
                <div class="yy-box-p3 green">{{ klwtValue }}吨</div>
              </div>

              <!-- 面积 水 -->
              <div class="yy-box-p"  style="justify-content: right;">
                <div class="yy-box-p1">每平米</div>
                <div class="yy-box-p2 green">水</div>
                <div class="yy-box-p3 green">{{ mjwtValue }}吨</div>
              </div>

              <!-- 人均 电 -->
              <div class="yy-box-p">
                <div class="yy-box-p1 ls">用量</div>
                <div class="yy-box-p2 red">电</div>
                <div class="yy-box-p3 red">{{ klelctValue }}度</div>
              </div>

              <!-- 面积 电 -->
              <div class="yy-box-p"  style="justify-content: right;">
                <div class="yy-box-p1 ls">用量</div>
                <div class="yy-box-p2 red">电</div>
                <div class="yy-box-p3 red">{{ mjelctValue }}度</div>
              </div>

              <div class="yy-box-br"></div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, onMounted, ref, watch } from "vue";
import ContentTitle from "../contentTitle.vue";
import { ajaxRequest } from "../../../api/code.js";

const props = defineProps({
  abItems: {
    type: Array,
    required: true
  }
});

const selectedAbItem = computed(() => {
  return props.abItems.find(item => item.selected);
});

const emit = defineEmits(['closeChild']);

const closeCurrent = function () {
  emit('closeChild');
}
// const abItems = ref([{
//   name:"综合",
//   selected: true
// },{
//   name:"东(南)",
//   selected: false
// },{
//   name:"西(北)",
//   selected: false
// }]);
const areaId = ref('1177350');
watch(
  () => props.abItems,
  (newVal) => {
    console.log('abItems changed:', newVal);
    newVal.forEach(function (item) {
      if (item.selected) {
        if(item.name.indexOf('南')!=-1){
          areaId.value = '1177350'
        }else {
          areaId.value = '1177351'
        }
      }
    });
    getWtElctByToilet()
  },
  { deep: true }
);
onMounted(() => {
  console.log('Selected abItem:', selectedAbItem.value);
  props.abItems.forEach(function (item) {
      if (item.selected) {
        if(item.name.indexOf('南')!=-1){
          areaId.value = '1177350'
        }else {
          areaId.value = '1177351'
        }
      }
    });
  getWtElctByToilet()
});

const wtvalue = ref(0);
const elctvalue = ref(0);
const klwtValue = ref(0);
const klelctValue = ref(0);
const cwwtValue = ref(0);
const cwelctValue = ref(0);
const mjwtValue = ref(0);
const mjelctValue = ref(0);
async function getWtElctByToilet() {
  const params = {
    compId: "",
    areaId: areaId.value
  }
  ajaxRequest('post', 'getWtElctByToilet', params).then(res => {
      if(res.rows||res.rows.length>0){
        res.rows.forEach(function (item) {
          wtvalue.value = parseFloat(item.wtvalue).toFixed(2);
          elctvalue.value = parseFloat(item.elctvalue).toFixed(2);
          klwtValue.value = parseFloat(item.klwtValue).toFixed(4);   
          klelctValue.value = parseFloat(item.klelctValue).toFixed(4); 
          cwwtValue.value = parseFloat(item.cwwtValue).toFixed(2);
          cwelctValue.value = parseFloat(item.cwelctValue).toFixed(2);
          mjwtValue.value = parseFloat(item.mjwtValue).toFixed(2);
          mjelctValue.value = parseFloat(item.mjelctValue).toFixed(2);
        });
      }
    })
}
// "wtvalue": 374.87,
//             "mjelctValue": 6993.2,
//             "cwwtValue": 1.637,
//             "mjwtValue": 374.87,
//             "klwtValue": 0.0398,
//             "klelctValue": 0.7424,
//             "cwelctValue": 30.538,
//             "elctvalue": 6993.2
</script>

<style scoped>
.dy-panel-main{
  padding:2.5vh;
}

.layer-bottom{
  padding-left:5vh;
  padding-top: 2vh;
  padding-bottom: 1vh;
  border-top: 2px solid #1D4F59;
}

:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 16.3vh;
  margin-right: 2vh;
}
:deep(.custom-date-picker){
  width: 22vh !important; /* 确保您的样式被应用 */
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}

.yy-box{
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  .yy-box-md6{
    width: 88%;
    border: 3px solid #528599;
    box-shadow: inset -1px 2px 11px 0px #53869a;
    border-radius: 10px;
    .yy-box-icon{
      display: flex;
      justify-content: center;
      padding: 40px 20px;
    }
    .yy-box-content{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      .yy-box-p{
        width: 35%;
        display: flex;
        /* justify-content: center; */
        margin-bottom: 8px;
        .yy-box-p1{
          color: white;
          width: 60px;
          letter-spacing: 1px;
        }
        .ls{
          letter-spacing: 14px;
        }
        .yy-box-p2{
          width: 40px;
          text-align: center;
        }
        .yy-box-p3{
          width: 43%;
          text-align: right;
        }
        .green{
          color: #58bab2;
        }
        .red{
          color: #ac322a;
        }
      }
      .yy-box-br{
        height: 60px;
      }
    }
  }
}
</style>